<template>
  <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
  <svg
    v-else
    class="svg-icon"
    aria-hidden="true"
    v-on="$listeners"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <use :xlink:href="`#icon-${iconFileName}`" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconFileName: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 2em;
  height: 2em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
  display: inline-block; /* 确保图标显示 */
}
</style>
